import { defineComponent, ref, computed } from 'vue'
import {
  getValByUnit,
  拼组件名,
  拼样式名,
  isFunction,
  isBoolean,
  getRandomId,
} from 'amtf/utils'
const 主名 = 'table-colgroup'
const 组件名 = 拼组件名(主名)
function _拼样式名(params) {
  return 拼样式名(主名, params)
}
export default defineComponent({
  name: 组件名,
  props: {
    colgroups: {
      type: Array,
      required: true,
    },
    enableColumnResize: {
      type: Boolean,
      required: true,
    },
  },
  setup(props) {
    const getValByUnitForItem = (item) => {
      let width
      // 开启 column resize
      // console.log(`props.enableColumnResize 👉`,props.enableColumnResize)
      if (props.enableColumnResize) {
        // 解决使用 _columnResizeWidth 在多表头下宽度计算异常的问题
        width = item._columnResizeWidth ? item._columnResizeWidth : item.width
      } else {
        width = item.width
      }
      return getValByUnit(width)
    }

    return () => (
      <colgroup>
        {props.colgroups.map((item) => (
          <col key={item.key} style={{ width: getValByUnitForItem(item) }} />
        ))}
      </colgroup>
    )
  },
})
